<div class="top_menu">
<img class="logo" src="assets/images/logo.png">
	<ul class="top_rightmenu">
		<li (click)="Logout()" class="li1" title="退出系统" onmouseover="menuOver(this);" onmouseout="menuOut(this);"><img src="assets/images/exit.png" hoversrc="assets/images/exit2.png" normalsrc="assets/images/exit.png"  border="0"></li>

		<li (click)="goBack()" class="li2" title="回退" onmouseover="menuOver(this);" onmouseout="menuOut(this);"><img src="assets/images/return.png" hoversrc="assets/images/return2.png" normalsrc="assets/images/return.png" border="0"></li>

		<li class="li3" title="门户" onmouseover="menuOver(this);" onmouseout="menuOut(this);"><img src="assets/images/home.png" hoversrc="assets/images/home2.png" normalsrc="assets/images/home.png"  border="0"></li>

		<li [routerLink]="['/index']" class="li4" title="返回首页" onmouseover="menuOver(this);" onmouseout="menuOut(this);"><img src="assets/images/main.png" hoversrc="assets/images/main2.png" normalsrc="assets/images/main.png"  border="0"></li>
	</ul>
	<ul class="top_leftmenu">
		<li (click)="changeleft('xsgl')" class="a1" title="学生管理" onmouseover="menuOver(this);" onmouseout="menuOut(this);"><div><img *ngIf="xsgl" class="top_img1"  src="assets/images/student2.png"><img *ngIf="!xsgl" class="top_img1" hoversrc="assets/images/student2.png" normalsrc="assets/images/student.png" src="assets/images/student.png"></div><div>学生管理</div></li>
		<li (click)="changeleft('zcgl')" class="a2" title="资产管理" onmouseover="menuOver(this);" onmouseout="menuOut(this);"><div><img *ngIf="zcgl" class="top_img2"  src="assets/images/asset2.png"><img *ngIf="!zcgl" class="top_img2" hoversrc="assets/images/asset2.png" normalsrc="assets/images/asset.png"  src="assets/images/asset.png"></div><div>资产管理</div></li>
		<li (click)="changeleft('grbg')" class="a3" title="个人办公" onmouseover="menuOver(this);" onmouseout="menuOut(this);"><div><img *ngIf="grbg" class="top_img3" src="assets/images/private2.png"><img *ngIf="!grbg" class="top_img3" hoversrc="assets/images/private2.png" normalsrc="assets/images/private.png"  src="assets/images/private.png"></div><div>个人办公</div></li>
		<li (click)="changeleft('rsgl')" class="a4" title="人事管理" onmouseover="menuOver(this);" onmouseout="menuOut(this);"><div><img *ngIf="rsgl" class="top_img4" src="assets/images/hr2.png"><img *ngIf="!rsgl" class="top_img4" hoversrc="assets/images/hr2.png" normalsrc="assets/images/hr.png"  src="assets/images/hr.png"></div><div>人事管理</div></li>
		<li (click)="changeleft('cwpt')" class="a5" title="财务平台" onmouseover="menuOver(this);" onmouseout="menuOut(this);"><div><img *ngIf="cwpt" class="top_img4" src="assets/images/cwgl2.png"><img *ngIf="!cwpt" class="top_img4" hoversrc="assets/images/cwgl2.png" normalsrc="assets/images/cwgl.png"  src="assets/images/cwgl.png"></div><div>财务平台</div></li>
		<li (click)="changeleft('zhxz')" class="a6" title="综合行政" onmouseover="menuOver(this);" onmouseout="menuOut(this);"><div><img *ngIf="zhxz" class="top_img4" src="assets/images/zhxz2.png"><img *ngIf="!zhxz" class="top_img4" hoversrc="assets/images/zhxz2.png" normalsrc="assets/images/zhxz.png"  src="assets/images/zhxz.png"></div><div>综合行政</div></li>
		<li (click)="changeleft('xtsz')" class="a7" title="系统设置" onmouseover="menuOver(this);" onmouseout="menuOut(this);"><div><img *ngIf="xtsz" class="top_img6" src="assets/images/xtsz2.png"><img *ngIf="!xtsz" class="top_img6" hoversrc="assets/images/xtsz2.png" normalsrc="assets/images/xtsz.png"  src="assets/images/xtsz.png"></div><div>系统设置</div></li>  
	</ul>
<div class="dibu"></div>
</div>
<!-- 左侧菜单栏 -->
<div class="menu-left" [style.height]="height + 'px'" [class.left-hide-l]="ifleft">
	<div class="kzt"></div>
	<div class="ycleft" [class.hidden]="ifleft" (click)="lefthide()"><i class="ion-chevron-left"></i></div>
	<div class="ycleft" style="display:block" [class.hidden]="!ifleft" (click)="lefthide()"><i class="ion-chevron-right"></i></div>
	<div class="user">

	<div class="head_img_div"></div>	
	<img id="jsimg" [src]="userimage" height="60" width="60" onError=" this.onerror=null;this.src='assets/images/jsimg/moren.jpg';">

		<span id="username" class="username" data-toggle="modal" data-target="#myModal">
		{{ userdata.username }}
		</span>
		
	</div>
		<div class="menu">
				<div class="menu2">
					<div class="menu-title">
						<img class="menu-title-img" src="assets/images/dian_1.png"> {{menu_title}}
					</div>
					<div class="menu_ul" [style.height]="menu_ul_height + 'px'">

				<app-menu-xsgl *ngIf="xsgl"></app-menu-xsgl>	
				<app-menu-zcgl *ngIf="zcgl"></app-menu-zcgl>	
				<app-menu-grbg *ngIf="grbg"></app-menu-grbg>					 
				<app-menu-rsgl *ngIf="rsgl"></app-menu-rsgl>	
				<app-menu-cwpt *ngIf="cwpt"></app-menu-cwpt>
				<app-menu-xtsz *ngIf="xtsz"></app-menu-xtsz>				
				<app-menu-zhxz *ngIf="zhxz"></app-menu-zhxz>				
					<!-- 动态加载进来菜单 -->
				</div>
			</div>
		</div>
<div class="search">
	<div class="shousuo">
		<!-- 防止自动填充	--><form style="display:none"><input type="password"/></form><input type="password" style="width:0;height:0;float:left;visibility:hidden"/> 
		<input class="shuru" type="text" autocomplete="off">
		<div class="anniu"></div>
	</div>
	<div class="zxrs">
	<img src="assets/images/online.png">
	<span style="cursor:pointer;float:left;margin-left:6px;margin-top:-2px;">当前在线人数<span id="onlineUserNum"><font color="red">{{rs}}</font>人&nbsp;</span></span>
	</div>
</div>
</div>
<!--右侧操作显示区-->
 <div [style.height]="height + 'px'" class="nr-right" id='right' [class.left-hide-r]="ifleft">
	 
<router-outlet></router-outlet>

</div>




<!--bootstrap3 模态框-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					修改个人资料
				</h4>
			</div>
			<div class="modal-body">
				<div align="center" style="margin:0 25px;">

				<table class="table table-striped table-bordered table-hover text-center">
					<tr>
						<td>姓名</td>
						<td>{{modeldata.username}}</td>
						<td style="width:30%;height:200px;" rowspan="4">
						<img (click)="openimgmodal(template)" class="img-thumbnail" height="180" width="180" [src]="userimage" onError=" this.onerror=null;this.src='assets/images/jsimg/moren.jpg';">
						</td>
					</tr>
					<tr>
						<td style="width:25%">性别</td>
						<td style="width:35%;padding:0;">
							<select [(ngModel)]="modeldata.sex" style="font-size:14px;width:100%;border:none;background:transparent;" name="xb"  class="input-sm">
								<option value="男">男</option>
								<option value="女">女</option>
							</select>   
						</td>
					</tr>  
					<tr>
						<td>手机号</td>
						<td><input [(ngModel)]="modeldata.phone" style="border:none;background:transparent;" type="text" name="">
						</td>
					</tr> 
					<tr>
						<td>邮箱</td>
						<td><input [(ngModel)]="modeldata.email" style="border:none;background:transparent;" type="text" name=""></td>
					</tr>  
				</table>
				<div *ngIf='ifsczp' class="progress">
					<div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div>
				</div>
		</div>

			</div>




			<div class="modal-footer">

				<button id="qxan" class="btn btn-warning" style="position:absolute;left:16px" data-dismiss="modal">
			取消
		</button>
        <input style="display: none;" id="upload_jszp" type="file" ng2FileSelect [uploader]="uploader"/>                
		<button *ngIf='!ifsczp' (click)="zpsc()" class="btn btn-sm btn-info" tooltip="提示：照片格式应为jpg,最大500KB" >更换照片</button>
	
		<button class="btn btn-sm btn-info" data-toggle="modal" data-target="#myModalt">修改密码</button>
		<button class="btn btn-primary" (click)="submit()">确认修改</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>



<!-- 模态框（Modal） -->
<div class="modal fade" id="myModalt" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					修改密码
				</h4>
			</div>
			<div class="modal-body">
				<div align="center" style="margin:0 25px;">

				<table class="table table-striped table-bordered table-hover text-center">
					<tr>
						<td>原密码</td>
						<td><input [(ngModel)]="ymm" id="ymm" style="border:none;background:transparent;width:100%;" type="password" name=""></td>
					</tr> 
					<tr>
						<td>新密码</td>
						<td><input [(ngModel)]="xmm" id="xmm" style="border:none;background:transparent;width:100%;" type="password" name=""></td>
					</tr>
					<tr>
						<td>确认新密码</td>
						<td><input [(ngModel)]="qrxmm" id="qrxmm" style="border:none;background:transparent;width:100%;" type="password" name=""></td>
					</tr>  
				</table>
		
		</div>
			</div>
			<div class="modal-footer">
				<button id="qxant" class="btn btn-warning" style="position:absolute;left:16px" data-dismiss="modal">
			取消
		</button>
        
		<button class="btn btn-primary" (click)="xgmm()">
			确认修改
		</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>

<ng-template #template>
    <div class="modal-body">
        <button style="margin-bottom: 10px;" type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
            <span aria-hidden="true">&times;</span>
          </button>
          <img class="img-thumbnail" height="180" width="300px" [src]="userimage" onError=" this.onerror=null;this.src='assets/images/jsimg/moren.jpg';">
    </div>
  </ng-template>